<script setup>
import Authority from "@/components/auth/Authority.vue";

const props = defineProps({
  permissions: {
    type: Object,
    default: [],
  }
});

</script>

<template>
  <div class="jia-button">
    <Authority>
      <template #default="{ userPermissions }">
        <a-button class="jia-btn" type="primary"
                  :disabled="!userPermissions.includes(props.permissions[3])">
          <template #icon>
            <icon-plus/>
          </template>
          <span>新增</span>
        </a-button>
      </template>
    </Authority>
    <Authority>
      <template #default="{ userPermissions }">
        <a-button class="jia-btn" type="primary" status="success"
                  :disabled="!userPermissions.includes(props.permissions[1])">
          <template #icon>
            <icon-edit/>
          </template>
          <span>修改</span>
        </a-button>
      </template>
    </Authority>
    <Authority>
      <template #default="{ userPermissions }">
        <a-button class="jia-btn" type="primary" status="danger"
                  :disabled="!userPermissions.includes(props.permissions[2])">
          <template #icon>
            <icon-delete/>
          </template>
          <span>删除</span>
        </a-button>
      </template>
    </Authority>
    <Authority>
      <a-button class="jia-btn" type="primary" status="warning">
        <template #icon>
          <icon-download/>
        </template>
        <span>导出</span>
      </a-button>
    </Authority>
  </div>
</template>

<style scoped lang="less">
.jia-button {
  width: 350px;
  height: 100%;
  display: flex;
  align-items: center;

  .jia-btn {
    border-radius: 5px;
    margin-right: 7px;
  }
}
</style>